<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>p5</title>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script> -->
    <script src="./src/p5.js"></script>
</head>

<body>
    <h2>pannel:</h2>
    <div id="pannel">
    </div>
</body>
<script>
    var x = 20;
    var y = 20;
    var targetX = 0;
    var targetY = 0;
    var easing = 0.1;
    function setup() {
        createCanvas(900, 900);
        x = mouseX;
        y = mouseY;
    }
    function draw() {
        background(220);
        targetX = mouseX;
        targetY = mouseY;
        x += (targetX - x) * easing;
        y += (targetY - y) * easing;
        ellipse(x, y, 20, 20);
    }
</script>

</html>